<template lang="html">
    <div id="editor" v-html="initial"></div>
</template>

<script>
import WangEditor from 'wangeditor'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'

export default {
    props: [ 'initial', 'uploadUrl' ],
    mounted() {
        this.createEditor()
        this.updateEditorContent({ text: this.initial })
    },
    methods: {
        ... mapMutations([ 'updateEditorContent' ]),
        createEditor() {
            const editor = new WangEditor('editor')
            editor.config.menus = [
                'source', '|', 
                'bold', 'underline', 'italic', 'strikethrough', 'eraser', 'forecolor', 'bgcolor', '|', 
                'quote', 'fontfamily', 'fontsize', 'head', 'unorderlist', 'orderlist', 'alignleft', 'aligncenter', 'alignright','|', 
                'link', 'unlink', 'table', 'img', 'insertcode', '|', 
                'undo', 'redo', 'fullscreen'
            ]
            editor.config.uploadImgUrl = this.uploadUrl
            const self = this 
            editor.onchange = function() { self.updateEditorContent({ text: this.$txt.html() }) }
            editor.create()
        }
    }
}
</script>

<style lang="css">
    #editor {
        height: 500px;
    }
    .wangEditor-container {
        border-radius: 2px;
    }
    .wangEditor-menu-container {
        border-bottom: 1px solid rgba(0,0,0,0.6) !important; 
    }
</style>